<template>
  <div class="second-box">
    <div v-for="(item, index) in list" :key="index">
      <el-image :src="item.img"></el-image>
      <ul>
        <li v-for="(content, j) in item.contentList">
          {{ content }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          img: require("_a/Footer/3.jpg"),
          contentList: [
            "12h – 19:00h",
            "Monday - Saturday",
            "Barcelona",
            "Bailén, 18 08010 Barcelona, Spain"
          ]
        },
        {
          img: require("_a/Footer/4.jpg"),
          contentList: [
            "12h – 19:00h",
            "Monday - Saturday",
            "Madrid",
            "Churruca, 5 28004 Madrid, Spain"
          ]
        }
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
.second-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  & > div {
    display: flex;

    &:first-child {
      @media (max-width: 899px) {
        margin-right: 0px;
      }
      @media (min-width: 900px) {
        margin-right: 50px;
      }
    }

    & > div {
      width: 174px;
      height: 80px;
    }
    ul,
    li {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    ul {
      font-size: 13px;
      margin-left: 32px;
      li {
        height: 22px;
        line-height: 22px;
      }
    }
  }
}
</style>
